<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :title="dialogText"
             width="50%" @open="open">
    <el-form ref="form" :model="formData" label-width="80px" class="form" :rules="formRuler">
      <el-scrollbar height="400px">
        <el-form-item prop="name" label="分类名称">
          <el-input v-model="formData['name']" placeholder="分类名称"/>
        </el-form-item>
        <el-form-item prop="description" label="分类描述">
          <el-input type="textarea" v-model="formData['description']" placeholder="分类描述信息"/>
        </el-form-item>
        <el-form-item prop="remark" label="分类备注">
          <el-input v-model="formData['remark']" placeholder="分类备注信息"/>
        </el-form-item>
      </el-scrollbar>
    </el-form>
    <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="resetDialog">重置</el-button>
        <el-button @click="handleAddGoodGroup" :loading="submitLoading" type="primary">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ResultCode } from '@/constants/constants'
import { insertStoreCategory } from '@/api/ApiSysStoreCategory'
import StoreCategoryInsertDTO from '@/api/entity/StoreCategoryInsertDTO'

export default {
  name: 'InsertStoreCategoryDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    parentId: {
      required: true,
      type: [Number, String]
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      submitLoading: false,
      dialogVisible: false,
      formData: {
        name: '',
        description: '',
        remark: ''
      },
      formRuler: {
        name: [{
          required: true,
          message: '分类名称不能为空',
          trigger: 'blur'
        }, {
          max: 32,
          message: '分类名称不应超过32个字符',
          trigger: 'blur'
        }],
        description: [{
          max: 64,
          message: '分类描述不应超过64个字符',
          trigger: 'blur'
        }],
        remark: [{
          max: 32,
          message: '分类备注信息不应超过32个字符',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    dialogText () {
      return this.parentId && this.parentId > 0 ? '添加子节点' : '添加根节点'
    }
  },
  methods: {
    open () {
      this.resetDialog()
    },
    /**
     * 关闭本对话框
     */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
     * 重置数据
     */
    resetDialog () {
      this.formData = {
        name: '',
        description: '',
        remark: ''
      }
    },
    /**
     * 提交，添加商品分类数据
     */
    handleAddGoodGroup () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.parentId || this.parentId < 0) {
            this.parentId = 0
          }
          this.submitLoading = true
          const params = StoreCategoryInsertDTO.instance()
          params.setParentId(this.parentId)
          params.setName(this.formData.name)
          params.setDescription(this.formData.description)
          params.setRemark(this.formData.remark)
          insertStoreCategory(params, data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('添加商品分类信息成功')
              this.$emit('change')
              this.dialogVisible = false
            }
          }, () => {
            this.submitLoading = false
          })
        }
      })
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped>
  .form{
    padding: 8px 20px;
  }
</style>
